<template>
  <view class="right-detail">
    <view
      class="right-detail-title"
      :class="{ 'text-color-gold': current == 3 }"
    >
      <text>{{ currentLevel.levelName }}会员尊享</text>
      <text class="right-detail-title-num">
        {{ currentLevel.currentLevelRightsNum }}
      </text>
      <text>项权益</text>
    </view>
    <view class="right-detail-content">
      <view
        class="right-detail-seciton"
        v-for="right in currentLevel.categoryRights"
        :key="right.category"
      >
        <view
          class="right-detail-section-title"
          :class="{ 'text-color-gold': current == 3 }"
        >
          {{ right.categoryName }}
        </view>
        <view class="right-detail-section-rights">
          <view
            class="right-detail-section-rights-item"
            :class="{ inactive: !right.isHasRight }"
            v-for="(right, index) in right.rights"
            :key="index"
          >
            <view class="right-detail-section-rights-item-image">
              <image
                class="w-full"
                mode="widthFix"
                :src="right.imgs"
              />
              <view
                class="right-detail-section-rights-item-image-mask"
                :style="[getLockedRightImgStyle]"
                v-if="!right.isHasRight"
              />
            </view>
            <view
              class="right-detail-section-rights-item-title"
              :class="{ 'text-color-gold': current == 3 }"
            >
              {{ right.rightName }}
            </view>
            <view class="right-detail-section-rights-item-desc">
              {{ right.assistDesc }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "RightDetail",
  props: {
    rightLevels: {
      type: Array,
      default: () => []
    },
    current: {
      type: Number,
      default: 0
    }
  },
  computed: {
    currentLevel() {
      return this.rightLevels[this.current]
    },
    getLockedRightImgStyle() {
      return `background-image: url(/pages/customer-center/static/rights/locked-img_${
        this.current + 1
      }.png)`
    }
  }
}
</script>

<style lang="scss" scoped>
.right-detail {
  display: flex;
  flex-direction: column;
  position: relative;

  &-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $uni-font-size-xl;
    padding: $uni-spacing-row-base 0;
    &-num {
      font-size: 48rpx;
      font-weight: bold;
      padding: 0 $uni-spacing-row-sm;
    }
  }

  &-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 80rpx;
  }

  &-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    &-title {
      font-size: $uni-font-size-lg;
      padding: $uni-spacing-row-lg 0;
    }
    &-rights {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      row-gap: $uni-spacing-row-base;
      margin-bottom: $uni-spacing-row-base;
      &.inactive {
        opacity: 0.5;
      }
      &-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &.inactive {
          opacity: 0.5;
        }
        &-image {
          position: relative;
          width: 100rpx;
          height: 100rpx;
          &-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100rpx;
            height: 100rpx;
            z-index: 10;
            background-image: url("/pages/customer-center/static/rights/locked-img_1.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center;
          }
        }
        &-title {
          font-size: $uni-font-size-sm;
          margin-bottom: $uni-spacing-row-xs;
        }
        &-desc {
          font-size: $uni-font-size-xs;
          color: $uni-text-color-grey;
        }
      }
    }
  }
}
</style>
